<template>
    <div class="main">
      <Row>
        <i-col span="2"><img src="../assets/img/stindex.jpg" class="stimg"></i-col>
        <i-col span="10" class="ftfont">内蒙古标准文献公共服务平台</i-col>
      </Row>
      <div class="content content-front">
        <div class="right">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" >
                <Form-item class="title" label="">
                  <div class="itemtitle">忘记密码</div>
                </Form-item>
                <Form-item class="formitemre" label="用户名" prop="username" :label-width="90">
                    <i-input v-model="formValidate.username" placeholder="请输入用户名"></i-input>
                </Form-item>
                <Form-item class="formitemreya" label="邮箱验证码" prop="mailverify" :label-width="90">
                  <Row>
                    <i-col span="23">
                      <Form-item>
                        <i-input v-model="formValidate.mailverify" placeholder="请输入邮箱验证码"></i-input>
                      </Form-item>
                    </i-col>
                    <i-col span="1">
                        <i-button class="rehuoqu" type="info" v-show="show" @click="getCode">获取验证码</i-button>
                        <i-button class="rehuoqu" type="info" v-show="!show" >{{count}}</i-button>
                    </i-col>
                  </Row>
                </Form-item>
                <Form-item>
                    <i-button type="primary" class="registerconfirm" @click="handleRegister('formValidate')">提交</i-button>
                    <i-button type="ghost" class="registerreset" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
                </Form-item>
            </Form>
          <Modal
              v-model="modal2"
              title="请进行滑动验证"
              :closable="false"
              :mask-closable="false"
              width="340">
              <slide-verify :l="42"
              :r="10"
              :w="310"
              :h="155"
              @success="onSuccessRegister"
              @fail="onFailRegister"
              @refresh="onRefreshRegister"
              :slider-text="text"
              :imgs="imgs"
              ></slide-verify>
              <div>{{msgRegister}}</div>
              <div slot="footer">
              </div>
          </Modal>
        </div>
      </div>
    </div>
</template>
<script>
import {neturl} from '../assets/js/common'
export default {
  data () {
    return {
      img: '../../static/image/stindex.jpg',
      msg: '',
      imgs: [
        '../../static/image/img.jpg',
        '../../static/image/img1.jpg',
        '../../static/image/img2.jpg',
        '../../static/image/img3.jpg',
        '../../static/image/img4.jpg'
      ],
      msgRegister: '',
      text: '向右滑',
      modal1: false,
      modal2: false,
      show: true,
      count: '',
      timer: null,
      formValidate: {
        username: '',
        mailverify: ''
      },
      userinfo: '',
      ruleValidate: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        mailverify: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleRegister (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // 修改密码提交
          this.modal2 = true
        } else {
          this.$Message.error('验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    getCode () {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
      // 发送验证码
      let mail = this.formValidate.username
      // let mail = '121062513@qq.com'
      let upload = { data: mail }
      // console.log(upload)
      this.$axios.post(neturl + '/by/adms/user/verifyfor', upload
      ).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.$Message.success('验证码获取成功!')
        } else {
          this.$Message.error('获取失败，用户名不存在')
        }
      })
    },
    onFail () {
      this.msg = '验证失败'
    },
    onRefresh () {
      this.msg = ''
    },
    onSuccessRegister () {
      this.modal2 = false
      // 修改密码提交表单
      let upload = { data: '{username: ' + "'" + this.formValidate.username + "'" + ', verifycode: ' + "'" + this.formValidate.mailverify + "'" + '}' }
      // let upload = { data: '{email: ' + "'" + '121062513@qq.com' + "'" + ', newpassword: ' + "'" + this.formValidate.newpassword + "'" + ', oldpassword: ' + "'" + this.formValidate.oldpassword + "'" + ', verifycode: ' + "'" + this.formValidate.mailverify + "'" + '}' }
      this.$axios.post(neturl + '/by/adms/user/forgetpassword', upload
      ).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          // console.log(res)
          this.$Message.success('新密码已发至您邮箱!')
        } else if (res.data.code === 400) {
          this.$Message.error(res.data.info)
        }
      })
    },
    onFailRegister () {
      this.msg = '验证失败'
    },
    onRefreshRegister () {
      this.msg = ''
    },
    onAgain () {
      // console.log('检测到非人为操作的哦！')
      this.msg = 'try again'
      // 刷新
      this.$refs.slideblock.reset()
    },
    handleClick () {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset()
    },
    ok () {
    },
    cancel () {
    }
  },
  created () {
    // this.userinfo = this.$cookie.get('user')
    // if (this.userinfo === null) {
    //   this.$router.push('/login')
    // }
    // this.userinfo = JSON.parse(this.userinfo)
    // console.log(this.userinfo)
  }
}
</script>

<style>
.ivu-tabs-nav{
  width:100%
}
.ivu-tabs-nav .ivu-tabs-tab{
  width:50%
}

</style>
<style scoped>
  @import '../assets/css/forgetpassword.css';
</style>
